<template>
  <div id="app">
    <router-view></router-view>
      <ul class="main-menu">
        <li v-for="(i,s) of list" :key="s" @click="goPath(i.path)" :class="[$route.path===i.path?'active':'']">
          <div class="cname">{{i.name}}</div>
          <div class="ename">{{i.ename}}</div>
        </li>
      </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list:[
        {name:'导览',path:'/daolan',ename:'Guide Map'},
        {name:'常见业务',path:'/changjianyewu',ename:'Regular Business Guide'},
        {name:'员工风采',path:'/yuangongfengcai',ename:'Staff Publicity'},
        {name:'企业文化',path:'/qiyewenhua',ename:'Corporate Culture'},
        {name:'周边网点',path:'/zhoubianwangdian',ename:'Distribution of Surrounding Banks'},
      ]
    }
  },
  methods:{
    goPath(path){
      this.$router.push(path)
    }
  }
}
</script>
<style lang="scss" scoped>
#app{
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: url("./assets/img/bg.png") no-repeat;
  background-size: cover;
}
.main-menu{
  position: absolute;
  border-top: 5px solid rgb(13,59,148);
  padding-top: 10px;
  bottom: 00px;
  width: 100%;
  display: flex;
  padding-right: 100px;
  padding-left: 100px;
  justify-content: space-around;
  background: #F2F6FC;
  li{
    cursor: pointer;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 10px;
    font-size: 32px;
    height: 80px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    .cname,.ename{
      position: relative;

    }
    .cname{

    }
    .ename{
      font-size: 14px;

    }
    &.active{
      color:#fff;
      background-color: rgb(8,58,148);
    }

  }

}
</style>
